<template>
  <div class="product-detail">
    <!-- 顶部通知栏 -->

    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <div class="container">
        <router-link to="/" class="link">首页</router-link>
        <span class="sep">/</span>
        <router-link to="/all-coffees">全部咖啡豆</router-link>
        <span class="sep">/</span>
        <span>{{product.name}}</span>
      </div>
    </div>

    <!-- 主体 -->
    <main class="main">
      <div class="container">
        <!-- 产品展示 & 购买区 -->
        <div class="layout">
          <!-- 左侧图片 -->
          <div class="left">
            <div class="main-img">
              <img :src="main_image" alt="产品主图" />
            </div>
            <div class="thumbs">
              <img
                v-for="(img, idx) in product.images"
                :key="idx"
                :src="'http://127.0.0.1:8000/static/'+img"
                :class="{ active: idx === activeThumb }"
                @click="switchThumb(idx)"
              />
            </div>
            <div class="tags">
              <span>{{ this.product.flavor_notes }}</span>
            </div>
          </div>

          <!-- 右侧信息 -->
          <div class="right">
            <h1 class="title">{{ product.name }}</h1>

            <div class="rating">
              <div class="stars">
                <i v-for="i in 5" :key="i" class="fa fa-star"></i>
              </div>
              <span>4.9 ({{product.view_count}}评价)</span>
              <span class="line">|</span>
              <span>已售 {{product.sales_count}}</span>
            </div>

            <div class="price-row">
              <span class="price">¥{{ product.price }}</span>
              <span class="original">¥{{ product.original }}</span>
            </div>

            <p class="desc" data-v-45c1c856="">
              {{ product.desc }}
            </p>

            <!-- 规格 -->
            <div class="spec-section">
              <h4>重量规格</h4>
              <div class="spec-list">
                <button
                  v-for="w in weights"
                  :key="w"
                  :class="{ active: weight === w }"
                  @click="weight = w"
                >
                  {{ w }}
                </button>
              </div>
            </div>


            <div class="spec-section">
              <h4>购买数量</h4>
              <div class="qty">
                <button @click="qty > 1 && qty--"><i class="fa fa-minus"></i></button>
                <input v-model.number="qty" type="number" min="1" max="99" />
                <button @click="qty++"><i class="fa fa-plus"></i></button>
              </div>
            </div>

            <div class="actions">
              <button class="btn-primary" @click="addToCart(product)">
                <i class="fa fa-shopping-cart"></i> 加入购物车
              </button>
              <button class="btn-ghost" @click="addandpush(product)">立即购买</button>
              <button
                :class="['btn-wish', { active: isWish }]"
                @click="isWish = !isWish"
              >
                <i :class="isWish ? 'fa fa-heart' : 'fa fa-heart-o'"></i>
              </button>
            </div>

            <div class="info">
              <p><span>产地：</span>{{ product.origin }}</p>
              <p><span>烘焙日期：</span>{{ product.roastDate }}</p>
              <p><span>保质期：</span>12个月（未开封）</p>
            </div>
          </div>
        </div>

        <!-- 详情标签页 -->
        <div class="detail-tabs">
          <div class="tab-nav">
            <button
              v-for="tab in tabs"
              :key="tab.id"
              :class="{ active: activeTab === tab.id }"
              @click="activeTab = tab.id"
            >
              {{ tab.label }}
            </button>
          </div>

          <div class="tab-content">
            <!-- 产品详情 -->
            <div v-show="activeTab === 'details'" class="tab-pane">
              <div class="grid">
                <div class="text">
                  <h3>关于这款咖啡</h3>
                  <p>
                    {{this.product.desc}}
                  </p>
                  <h3>风味特点</h3>
                  <ul class="flavors">
                    <li><i></i>{{this.product.flavor_notes}}</li>
                  </ul>
                </div>
                <div class="pics">
                  <img src="https://picsum.photos/id/435/600/400" alt="农场" />
                </div>
              </div>
            </div>

            <!-- 产品参数 -->
            <div v-show="activeTab === 'params'" class="tab-pane">
              <div class="params">
                <div class="row">
                  <span>产品名称</span>
                  <span>{{ product.name }}</span>
                </div>
                <div class="row">
                  <span>产地</span>
                  <span>{{ product.origin }}</span>
                </div>
                <div class="row">
                  <span>海拔</span>
                  <span>1900-2100米</span>
                </div>
                <div class="row">
                  <span>品种</span>
                  <span>{{ product.origin }}当地原生种</span>
                </div>
                <div class="row">
                  <span>处理方式</span>
                  <span>水洗处理</span>
                </div>
                <div class="row">
                  <span>烘焙度</span>
                  <span>浅度烘焙</span>
                </div>
                <div class="row">
                  <span>烘焙日期</span>
                  <span>{{ product.roastDate }}</span>
                </div>
                <div class="row">
                  <span>保质期</span>
                  <span>12个月（未开封）</span>
                </div>
              </div>
            </div>

            <!-- 用户评价 -->
            <div v-show="activeTab === 'reviews'" class="tab-pane">
              <div class="reviews">
                <div class="summary">
                  <div class="score">4.9</div>
                  <div class="stars">
                    <i v-for="i in 5" :key="i" class="fa fa-star"></i>
                  </div>
                  <span>({{ reviews.length }} 条评价)</span>
                </div>
                <div class="review-list">
                  <div v-for="review in reviews.slice(0, 2)" :key="review.id" class="review-card">
                  <div class="rating">{{ review.rating }}星</div>
                  <div class="content">{{ review.content }}</div>
                  <div class="meta">
                    <span>{{ formatDate(review.created_at) }}</span>
                  </div>
                 </div>
                  <div class="show-all-container" style="text-align: center; margin-top: 1rem;">
                    <router-link
                        :to="{
                      name: 'ProductReview',
                      params: { id: product.id }  // 注意：params必须放在to的对象内部
                        }"

                    >
                      查看全部评价
                    </router-link>

        </div>
              </div>
            </div>

            <!-- 冲煮建议 -->
            <div v-show="activeTab === 'brewing'" class="tab-pane">
              <div class="brewing">
                <div class="method">
                  <h3>手冲滴滤建议</h3>
                  <div class="info">
                    <ul>
                      <li>粉水比：1:15 - 1:16</li>
                      <li>水温：90 - 92°C</li>
                      <li>研磨度：中度偏细</li>
                      <li>时间：2分30秒 - 3分钟</li>
                    </ul>
                    <ol>
                      <li>磨豆 → 温杯 → 闷蒸 30 秒</li>
                      <li>绕圈注水至 50% → 等待膨胀</li>
                      <li>继续注水至总量 → 完成萃取</li>
                    </ol>
                  </div>
                </div>

                <div class="method">
                  <h3>意式浓缩建议</h3>
                  <div class="info">
                    <ul>
                      <li>粉量：18 - 20 g</li>
                      <li>出杯量：36 - 40 ml</li>
                      <li>时间：25 - 30 秒</li>
                      <li>研磨度：极细</li>
                    </ul>
                    <p>
                      花香更浓郁，酸度柔和，甜感增强；适合黑咖或少量奶咖。
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 相关推荐 -->
        <div class="recommend">
          <h2>您可能也喜欢</h2>
          <div class="recommend-list">
            <div v-for="item in productlist.slice(0,4)" :key="item.id" class="card">
            <div class="img">
  <!-- 处理图片路径和空值情况 -->
  <img
    :src="item.image_urls && item.image_urls.length > 0
      ? (item.image_urls[0].startsWith('http') ? item.image_urls[0] : `http://127.0.0.1:8000/static/${item.image_urls[0]}`)
      : ''"
    :alt="item.name"
  />
  <span class="tag">{{ item.stock }}</span>
  <span v-if="item.discount" class="discount">{{ item.description }}</span>
  <button class="wish"><i class="fa fa-heart-o" ></i></button>
</div>
            <div class="info">
              <router-link :to="'/productdetail?id=' + item.id">
              <div><h3>{{ item.name }}</h3></div>
              </router-link>
              <p>{{ item.description }}</p>
              <div class="bottom">
                <div class="price">
                  <span class="now">¥{{ item.price.toFixed(2) }}</span>
                </div>
                <button class="cart" @click="addToCart(item)"><i class="fa fa-shopping-cart"></i></button>
              </div>
            </div>
          </div>
          </div>
        </div>
      </div>
      </div>
    </main>
    <Footer />
    <BackTop :visible="showTop" @click="toTop" />
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import BackTop from '@/components/BackTop.vue'
import api from '@/api/request'

export default {
  name: 'ProductDetail',
  components: {Header, Footer, BackTop},
  data() {
    return {
      showTop: false,
      activeTab: 'details',
      main_image: '',
      activeThumb: 0,
      weight: '250g',
      grind: 'whole',
      qty: 1,
      isWish: false,
      product: {},
      productlist: [],
      weights: ['227g'],
      grinds: [
        {value: 'whole', label: 'whole bean\n（ whole bean ）'},
        {value: 'espresso', label: '意式浓缩\n（ Espresso ）'},
        {value: 'drip', label: '手冲滴滤\n（ Drip ）'},
        {value: 'french', label: '法压壶\n（ French ）'},
        {value: 'aeropress', label: '爱乐压\n（ Aeropress ）'},
        {value: 'turkish', label: '土耳其式\n（ Turkish ）'}
      ],
      tabs: [
        {id: 'details', label: '产品详情'},
        {id: 'params', label: '产品参数'},
        {id: 'reviews', label: '用户评价'},
        {id: 'brewing', label: '冲煮建议'}
      ],
      reviews: [],
      productType: 'coffee',  // 或从props获取
      recommends: [
        {
          id: 1,
          name: '哥伦比亚 苏普雷莫',
          origin: '哥伦比亚',
          price: 89,
          stars: 5,
          img: 'https://picsum.photos/id/766/400/300'
        },
        {
          id: 2,
          name: '肯尼亚 AA',
          origin: '肯尼亚',
          price: 118,
          stars: 4.5,
          img: 'https://picsum.photos/id/493/400/300'
        },
        {id: 3, name: '巴西 圣多斯', origin: '巴西', price: 78, stars: 4, img: 'https://picsum.photos/id/225/400/300'},
        {
          id: 4,
          name: '危地马拉 安提瓜',
          origin: '危地马拉',
          price: 98,
          stars: 4.5,
          img: 'https://picsum.photos/id/312/400/300'
        }
      ]
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  created() {
   // 正确获取id的方式
  const productId = this.$route.query.id;
  if (productId) {
    this.getproductdetail(productId);
    this.loadReviews(productId);
  } else {
    console.error('未获取到产品id');
  }
  },
  computed: {
    userProfile() {
      return this.$store.state.profile
    }
  },
  watch: {
  // 只监听路由中“商品ID”（query.id）的变化，精准触发详情更新
  '$route.query.id': {
    handler(newProductId, oldProductId) {
      // 1. 排除无效情况：新ID为空/新ID和旧ID相同，不执行操作
      if (!newProductId || newProductId === oldProductId) return;

      // 2. 加载新商品详情
      this.getproductdetail(newProductId)
        .then(() => {
          // 3. 重置图片选中状态（避免残留旧商品的缩略图选中效果）
          this.activeThumb = 0;
          // 4. 重置主图（确保显示新商品的第一张图）
          this.main_image = this.product.images.length
            ? `http://127.0.0.1:8000/static/${this.product.images[0]}`
            : '';
          // 5. 跳转后滚动到页面顶部（提升用户体验）
          this.toTop();
        })
        .catch(err => {
          console.error('切换商品详情失败：', err.message);
          this.product = {}; // 错误时清空旧数据，避免混淆
        });
    },
    immediate: false, // 初始加载由created处理，仅监听后续ID变化
  }
},
  methods: {
    async addToCart(product) {

      if (this.$store.getters['user/isVisitor']) {
        this.$store.commit('user/SET_REDIRECT_PATH', this.$route.path);
        return this.$confirm(
                '您还暂未登录，无法购买商品，是否前往登录？',
                '提示',
                {confirmButtonText: '是', cancelButtonText: '否', type: 'warning'}
        ).then(() => {
          this.$router.push('/login');
        }).catch(() => {
          this.$message.info('已取消登录');
        });
      }

      try {
        await api.post('/cart', {
          product_id: product.id,
          product_type: 'coffee',
          quantity: 1
        })
        alert("已成功添加至购物车")
        window.location.reload();
      } catch (e) {
        console.error('422 错误详情：', e.response?.data);
        console.error('添加失败', e);
      }
    },
    addandpush(product){
      this.addToCart(product)
      this.$router.push('/cart')
    },
    switchThumb (idx) {
      this.activeThumb = idx
      console.log(this.activeThumb)
      this.main_image = `http://127.0.0.1:8000/static/${this.product.images[idx]}`
      console.log(this.main_image)
    },
    index_products:function (){
      this.$axios.get('http://127.0.0.1:8000/coffeeProduct/')
      .then(response => {
        // 后端返回结构为 { code, message, data }
        if (response.code === 200) {
          console.log(response.data)
          // 从返回数据的data字段中获取商品列表
          this.productlist = response.data;
        } else {
          console.log('获取商品失败:', response.message);
        }
      })
      .catch(error => {
        console.error('请求商品接口出错:', error);
      });
    },
    getproductdetail(id){
      return this.$axios.get(`http://127.0.0.1:8000/coffeeProduct/${id}`)
          .then(res => {
// 3. 校验响应数据（防止后端返回空或格式错误）
            if (!res || !res.data) {
              throw new Error('后端返回数据为空');
            }
            const productData = res.data;
            // 4. 格式化为前端所需结构（详情接口返回单个对象，无需 map）
            this.product = {
              id: productData.id,
              name: productData.name || '未知产品', // 兜底默认值
              desc: productData.description || '暂无描述',
              price: productData.price || 0,
              stock: productData.view_count,
              flavor_notes: productData.flavor_notes,
              view_count: productData.view_count,
              sales_count: productData.sales_count,
              original: productData.original_price || 0,
              origin: productData.origin_region || '未知产地',
              roastDate: productData.created_at || '未知日期',
              images: productData.image_urls || [] // 默认为空数组，避免渲染报错
            };
            this.main_image = "http://127.0.0.1:8000/static/" + productData.image_urls[0]
            console.log('产品详情格式化后：', this.product);
            return this.product; // 返回格式化后的数据，供调用方使用
          })
          .catch(err => {
            // 5. 错误处理（统一捕获网络/业务错误）
            console.error('加载产品详情失败：', err.message || err);
            this.product = {}; // 错误时清空产品数据，避免旧数据残留
            return Promise.reject(err); // 抛出错误，让调用方可进一步处理
          })
    },
    // 获取产品评论
  async loadReviews(id) {
    try {
      // 发送请求，注意使用this.product_id
      await this.$axios.get(`http://127.0.0.1:8000/reviews/product/${id}`,
        {
          params: {
            product_type: this.productType, // 传递产品类型筛选
            page: 1,
            limit: 10
          }
        }).then(res=>{
          this.reviews = res.data.reviews;
      })

    } catch (err) {
      console.error('获取评论失败：', err);
    }
  },
    formatDate(dateString) {
      if (!dateString) return '无日期';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    },
    handleScroll() {
      this.showTop = window.scrollY > 300
    },
    toTop () {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
}
</script>

<style scoped>
/* ===== 全局变量 ===== */
:root {
  --primary: #8B5A2B;
  --secondary: #D2B48C;
  --accent: #CD853F;
  --light: #F5F5DC;
  --dark: #3E2723;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.12);
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.breadcrumb {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  color: #6b7280;
  padding: 12px 0;
}
.breadcrumb .link {
  color: var(--primary);
}
.breadcrumb .sep {
  margin: 0 8px;
}
.main {
  flex: 1;
  padding: 32px 0;
}
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}
.left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.main-img img {
  width: 100%;
  border-radius: var(--radius);
}
.thumbs {
  display: flex;
  gap: 12px;
}
.thumbs img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
}
.thumbs img.active {
  border-color: var(--primary);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags span {
  background: var(--primary);
  color: #fff;
  font-size: 18px;
  padding: 4px 10px;
  border-radius: 9999px;
}
.right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
}
.rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #555;
}
.rating .stars {
  color: #f59e0b;
}
.rating .line {
  color: #d1d5db;
}
.price-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.price {
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
}
.original {
  font-size: 16px;
  color: #9ca3af;
  text-decoration: line-through;
}
.discount {
  font-size: 12px;
  background: #fef2f2;
  color: #ef4444;
  padding: 2px 6px;
  border-radius: 4px;
}
.desc {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
}
.spec-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spec-section h4 {
  font-size: 16px;
  font-weight: 600;
}
.spec-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.spec-list button {
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.spec-list button.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.qty {
  display: flex;
  align-items: center;
  width: 120px;
}
.qty button,
.qty input {
  width: 40px;
  height: 40px;
  border: 1px solid #d1d5db;
  text-align: center;
  font-size: 16px;
}
.qty button {
  background: #fff;
}
.qty input {
  border-left: none;
  border-right: none;
}
.actions {
  display: flex;
  gap: 12px;
}
.btn-primary {
  flex: 1;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 14px 0;
  border-radius: var(--radius);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary:hover {
  background: var(--dark);
}
.btn-ghost {
  flex: 1;
  background: #fff;
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 12px 0;
  border-radius: var(--radius);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-ghost:hover {
  background: var(--light);
}
.btn-wish {
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #6b7280;
  transition: all 0.2s;
}
.btn-wish.active {
  color: #ef4444;
  border-color: #ef4444;
}
.promo {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 12px;
}
.promo h4 {
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--primary);
}
.promo ul {
  font-size: 13px;
  color: #4b5563;
  list-style: none;
}
.promo ul li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.promo ul li i {
  color: #10b981;
}
.info p {
  font-size: 14px;
  color: #4b5563;
}
.info span {
  color: #111827;
}
.detail-tabs {
  margin-top: 48px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tab-nav {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}
.tab-nav button {
  padding: 16px 24px;
  font-size: 15px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.tab-nav button.active {
  color: var(--primary);
  border-color: var(--primary);
}
.tab-content {
  padding: 24px;
}
.tab-pane .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .tab-pane .grid {
    grid-template-columns: 1fr 1fr;
  }
}
.tab-pane h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}
.tab-pane p {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
}
.flavors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.flavors li {
  display: flex;
  align-items: center;
}
.flavors li i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}
.pics img {
  width: 100%;
  border-radius: 8px;
}
.params .row {
  display: flex;
  border-bottom: 1px solid #f3f4f6;
  padding: 10px 0;
}
.params .row span:first-child {
  width: 30%;
  color: #6b7280;
}
.reviews .summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
}
.reviews .score {
  font-size: 36px;
  font-weight: 700;
  color: var(--primary);
}
.reviews .stars {
  color: #f59e0b;
  margin: 4px 0;
}
.review-list .review {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f3f4f6;
}
.review img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.review .head {
  display: flex;
  justify-content: space-between;
}
.review .name {
  font-weight: 600;
}
.review .date {
  font-size: 13px;
  color: #6b7280;
}
.review .stars {
  color: #f59e0b;
  font-size: 13px;
}
.review p {
  font-size: 15px;
  color: #111827;
  margin: 6px 0;
}
.review .imgs {
  display: flex;
  gap: 8px;
}
.review .imgs img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}
.brewing .method {
  margin-bottom: 32px;
}
.brewing h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}
.brewing .info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.brewing ul {
  background: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  font-size: 15px;
}
.brewing ol {
  font-size: 15px;
  color: #4b5563;
  padding-left: 24px;
}
.recommend {
  margin-top: 48px;
}
.recommend h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
}
.recommend-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .recommend-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .recommend-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s;
}
.card:hover {
  transform: translateY(-5px);
}
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.card .info {
  padding: 16px;
}
.card .tag {
  font-size: 12px;
  background: var(--primary);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
}
.card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 8px 0;
}
.card .rating {
  color: #f59e0b;
  font-size: 13px;
}
.card .price {
  font-weight: 700;
  font-size: 18px;
  color: var(--primary);
}
.card .add {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  cursor: pointer;
}
  .desc {
  font-size: 15px;
  line-height: 1.6;
  color: #4b5563;
  margin-top: 8px;
  margin-bottom: 0;
}
  .detail-tabs {
  margin-top: 32px; /* 原48→32px */
}
  /* --- 重量 & 研磨度 --- */
.spec-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.spec-list button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px 6px;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  border-radius: 8px;
  white-space: pre-line;
}

/* --- 促销信息 --- */
.promo {
  background: linear-gradient(135deg, #fef7f0 0%, #fff 100%);
  border: 1px solid #f3e5d3;
}
.promo ul {
  list-style: none;
  padding: 0;
}
.promo ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
}
.promo ul li::before {
  content: '✔';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
  font-size: 12px;
}
  /* 1️⃣ 保证价格下方文字可见（强制撑开） */
.price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0 !important;   /* 去掉任何底部外距 */
}
.desc {
  display: block !important;
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
  margin-top: 8px;
}

/* 2️⃣ 收藏按钮样式恢复 */
.actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.btn-primary,
.btn-ghost {
  flex: 1 1 auto;
}
.btn-wish {
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #6b7280;
  transition: all 0.2s;
}
.btn-wish.active {
  color: #ef4444;
  border-color: #ef4444;
}
/* 评论面板整体样式 */
.tab-pane {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 评分汇总区域 */
.summary {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.score {
  font-size: 24px;
  font-weight: bold;
  color: #ff9500;
  margin-right: 10px;
}

.stars {
  color: #ff9500;
  font-size: 18px;
}

.summary span {
  margin-left: 10px;
  color: #666;
}

/* 评论列表容器 */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 单条评论卡片 */
.review-card {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #ff9500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 评论星级 */
.rating {
  font-size: 16px;
  font-weight: bold;
  color: #ff9500;
  margin-bottom: 8px;
}

/* 评论内容 */
.content {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 8px;
}

/* 评论元信息（日期等） */
.meta {
  font-size: 12px;
  color: #999;
}

.show-all-container a {
  /* 文字颜色，可根据整体色调调整 */
  color: #8B5A2B;
  /* 去掉默认下划线（若需要可保留） */
  text-decoration: none;
  /* 字体大小 */
  font-size: 14px;
  /* 鼠标悬浮时的指针样式 */
  cursor: pointer;
  /* 过渡效果，使颜色变化更平滑 */
  transition: color 0.3s ease;
}

.show-all-container a:hover {
  /* 鼠标悬浮时的文字颜色 */
  color: #512da8;
  /* 悬浮时显示下划线 */
  text-decoration: underline;
}

</style>